<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>微博</title>
<link href="style/weibo.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="jyArea">
     <div class="takeComment">
        <textarea name="textarea" class="takeTextField" id="tijiaoText"></textarea>
        <div class="takeSbmComment">
            <input type="button" class="inputs" value="" />
        </div>
    </div>


    <div class="commentOn">
    
    </div>
</div>
</body>
<script src="ajax.js"></script>
<script>
	// 包裹微博内容列表的元素
	const commentOn = document.querySelector(".commentOn");
	// 获取添加按钮
	const btn = document.querySelector(".inputs");
	const contentText = document.querySelector("#tijiaoText");
	btn.onclick = function(){
		ajax.post("/weibo",{
			content:contentText.value.trim()
		}).then(value=>{
			if(value.ok === 1){
				contentText.value = null;
				render();
			}else{
				alert(value.msg);
			}
		})
	}
	async function delWeibo(id){
		await ajax.get("/weibo/"+id);
		render();
	}
	// 更新微博内容
	async function render(){
		const result = await ajax.get("/weibo");// {ok:1,contentList}
		commentOn.innerHTML = `
			<div class="noContent" style="display:${result.contentList.length>0?'none':'block'}">暂无留言</div>
	        <div class="messList">
	            ${result.contentList.map(item=>(`
	                 <div class="reply">
		                <p class="replyContent">${item.content}</p>
		                <p class="operation">
		                    <span class="replyTime">${item.addTime}</span>
		                    <span class="handle">
		                        <a href="javascript:;" class="top">${item.topNum}</a>
		                        <a href="javascript:;" class="down_icon">${item.downNum}</a>
		                        <a href="javascript:;" onclick="delWeibo('${item.id}')" class="cut">删除</a>
		                    </span>
		                </p>
		            </div>
	            `)).join("")}
	        </div>
	        <div class="page">
	            <a href="javascript:;" class="active">1</a>
	            <a href="javascript:;">2</a>
	            <a href="javascript:;">3</a>
	        </div>
		`;
	}
	render();// 加载时调用
</script>
</html>
